import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/constants/constants.dart';

class GesturePage extends StatefulWidget {
  @override
  _GesturePageState createState() => _GesturePageState();
}

class _GesturePageState extends State<GesturePage> {

  String _operation = "No Gesture detected";

  double _top = 0;
  double _left = 0;

  double _left2 = 0;

  double _width = 200;


  TapGestureRecognizer _tapGestureRecognizer = TapGestureRecognizer();
  bool _toggle = false;
  @override
  void dispose() {
    super.dispose();
    _tapGestureRecognizer.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Gesture"),
      ),
      body: Flex(
        direction: Axis.vertical,
        children: <Widget>[

          /// 当同时监听onTap和onDoubleTap事件时，当用户触发tap事件时，会有200毫秒左右的延时，
          /// 这是因为当用户点击完之后很可能会再次点击以触发双击事件，所以GestureDetector会等一
          /// 段时间来确定是否为双击事件。如果用户只监听了onTap（没有监听onDoubleTap）事件时，则
          /// 没有延时。
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.red[50],
              child: Center(
                child: GestureDetector(
                  child: Container(
                    alignment: Alignment.center,
                    color: Colors.red[300],
                    width: 200,
                    height: 100,
                    child: Text(
                      _operation,
                      style: TextStyle(
                        color: Colors.white
                      ),
                    ),
                  ),
                  onTap: () => setState(() => _operation = "Tap"),
                  onDoubleTap: () => setState(() => _operation = "Double Tap"),
                  onLongPress: () => setState(() => _operation = "Long Press"),
                ),
              )
            )
          ),


          Expanded(
            flex: 1,
            child: Container(
              color: Colors.blue[50],
              child: Stack(
                children: <Widget>[
                  Positioned(
                    top: _top,
                    left: _left,
                    child: GestureDetector(
                      child: CircleAvatar(
                        backgroundColor: Colors.blue[300],
                        child: Text("A"),
                      ),
                      /// DragDownDetails.globalPosition：当用户按下时，此属性为用户
                      /// 按下的位置相对于屏幕（而非父组件）原点(左上角)的偏移。
                      onPanDown: (e) => print("Gesture Pan Down : ${e.globalPosition}"),
                      onPanUpdate: (e) => setState(() {
                        /// DragUpdateDetails.delta：当用户在屏幕上滑动时，会触发多次Update事件，
                        /// delta指一次Update事件的滑动的偏移量。
                        _left += e.delta.dx;
                        _top += e.delta.dy;
                      }),
                      /// DragEndDetails.velocity：该属性代表用户抬起手指时的滑动速度(包含x、y两个轴的），
                      /// 示例中并没有处理手指抬起时的速度，常见的效果是根据用户抬起手指时的速度做一个减速动画。
                      onPanEnd: (e) => print("Gesture Pan End: ${e.velocity}"),
                    ),
                  )
                ],
              ),
            )
          ),
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.green[50],
              child: Stack(
                children: <Widget>[
                  Positioned(
                    left: _left2,
                    top: 20,
                    child: GestureDetector(
                      child: CircleAvatar(
                        backgroundColor: Colors.green[300],
                        child: Text("Hori"),
                      ),
                      onPanUpdate: (e) => setState(() => _left2 += e.delta.dx),
                    ),
                  ),
                ],
              )
            )
          ),
          Expanded(
            flex: 3,
            child: Container(
              color: Colors.cyan[50],
              alignment: Alignment.center,
              child: GestureDetector(
                child: SizedBox(
                  width: _width,
                  height: _width,
                  child: Container(
                    color: Colors.cyan[300],
                  ),
                ),
                onScaleUpdate: (e) => setState(() {
                  _width = 100 * e.scale.clamp(.2, 10);
                  print("$e");
                }),
              ),
            ),
          ),
          Expanded(
            flex: 1,
            child: Center(
              child: Text.rich(
                TextSpan(
                  children: [
                    TextSpan(
                      text: "Hello world ",
                    ),
                    TextSpan(
                      text: "Click me change the color ",
                      style: TextStyle(
                        fontSize: 30,
                        color: _toggle ? Colors.blue : Colors.red
                      ),
                      recognizer: _tapGestureRecognizer
                        ..onTap = () => setState(() => _toggle = !_toggle)
                    ),
                    TextSpan(
                      text: "Hello world"
                    )
                  ]
                )
              ),
            ),
          )
        ]
      ),
    );
  }
}